<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '评价',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full pos-relative z-1 bg-#F6F6F8">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">评价</text>
        </template>
        <template #left>
          <wd-icon name="chevron-left" class="text-gray-333 font-size-44"></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full home-content ps-b-180">
        <view
          class="flex justify-start items-center p-x-28 p-y-34 bg-white"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <wd-img
            :width="'160rpx'"
            :height="'160rpx'"
            custom-class="b-rd-8 overflow-hidden"
            :src="item.pic"
          />
          <view class="wr-500 mg-l-24">
            <view
              class="flex justify-between items-start font-size-28 font-500 text-gray-333 line-h-40"
            >
              <view>{{ item.name }}</view>
            </view>
            <view
              class="flex justify-between items-start font-size-24 font-400 text-gray-999 line-h-36 mg-t-24"
            >
              <view>{{ item.title }}</view>
              <view>X{{ item.num }}</view>
            </view>
          </view>
        </view>

        <view class="mg-t-20 p-x-28 p-y-32 ps-b-1 bg-white">
          <view class="flex justify-start items-center">
            <view class="font-size-32 font-500 text-gray-333 mg-t-4">商品评价</view>
            <view class="mg-l-48">
              <wd-rate
                v-model="OrderParam.star"
                :active-color="['#7195F8']"
                size="36rpx"
                space="16rpx"
              />
            </view>
            <view class="font-size-32 font-400 text-gray-999 mg-l-32 line-h-44 mg-t-4">
              {{ OrderParam.star }}
            </view>
          </view>
          <view class="w-full hr-2 bg-#F5F5F5 mg-t-32"></view>
          <view class="mg-t-26">
            <wd-textarea
              v-model="OrderParam.content"
              disable-default-padding
              prefix-icon="edit-1"
              placeholder="展开说说对商品的想法吧…"
            ></wd-textarea>
          </view>
          <view class="mg-b-10 mg-t-20">
            <wd-upload
              :file-list="fileList"
              image-mode="aspectFill"
              :multiple="true"
              name="file[]"
              :header="header"
              :action="VITE_UPLOAD_BASEURL"
              @change="handleChange"
              @success="handleSuccess"
            ></wd-upload>
          </view>
        </view>
      </view>
      <view
        class="pos-absolute pos-bottom-0 pos-left-0 w-full hr-156 bg-white p-x-32 ps-t-14 bdr-top-2-#F5F5F5"
      >
        <view class="flex justify-end items-start">
          <!-- <view> 
            <view class="flex justify-start items-center">
              <view>
                <wd-checkbox v-model="OrderParam.isCheck"></wd-checkbox>
              </view>
              <view class="font-size-28 font-400 text-gray-333">匿名</view>
            </view>
            <view class="font-size-24 font-400 text-gray-999 line-h-34 mg-t-16">
              匿名会隐藏头像和昵称
            </view>
          </view> -->
          <view class="flex justify-end">
            <view class="wr-176 hr-72">
              <wd-button
                custom-class=" text-white font-size-32"
                type="primary"
                size="small"
                @click="handleSubmit"
              >
                <text class="font-size-28 font-400">发布</text>
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { confirmReceipt, getOrderDetail } from '@/service/order/order'
import { useUserStore } from '@/store/user'

defineOptions({
  name: 'OrderComment',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const userStore = useUserStore()
const { token } = userStore.userInfo as unknown as IUserInfo
const header = ref({
  token,
})
const OrderParam: any = ref({
  id: '', // 订单ID 必填
  orderGoodId: '',
  goodId: '',
  skuId: '',
  pics: '', // 评价图 必填
  content: '', // 评价 必填
  star: 0, // 星级
  isCheck: false, // 是否匿名
})
const handleClickLeft = () => {
  uni.navigateTo({ url: '/pages/orders/appraise' })
}
const fileList = ref<any[]>([])
const VITE_UPLOAD_BASEURL = import.meta.env.VITE_UPLOAD_BASEURL

function handleChange({ fileList: files }) {
  fileList.value = files
}
const handleSuccess = (res: any) => {
  if (res.file.response) {
    const dataObj: any = JSON.parse(res.file.response)
    if (dataObj.data) {
      // if (dataObj.data.length > 0) {
      //   fileList.value.push({
      //     url: dataObj.data[0],
      //   })
      // }
    }
  }
}
onLoad((options: any) => {})
onShow(() => {
  const item = uni.getStorageSync('OrderComment')
  if (item) {
    const itemObj: any = JSON.parse(item)
    orderItem = itemObj
    getData()
  }
})
const orderList: any = ref([])
let orderItem: any = null
const getData = () => {
  orderList.value.push(orderItem.goods)
  OrderParam.value.id = orderItem.goods.order_id
  // OrderParam.value.orderGoodId = orderItem.goods.order_id
  OrderParam.value.goodId = orderItem.goods.good_id
  OrderParam.value.skuId = orderItem.goods.sku_id
}
const handleSubmit = () => {
  let pics: any = ''
  fileList.value.forEach((item: any) => {
    pics += item.url + ','
  })
  if (!OrderParam.value.content) {
    uni.showToast({
      title: '请填写评价内容',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  OrderParam.value.pics = pics.substring(0, pics.length - 1)
  confirmReceipt(OrderParam.value).then((res: any) => {
    uni.showToast({
      title: '评价成功',
      icon: 'none',
      duration: 1000,
    })
    uni.navigateBack()
  })
}
</script>

<style scoped lang="scss">
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-textarea {
  padding: 0 !important;
}
::v-deep .wd-textarea__value {
  padding: 0 !important;
}
</style>
